<!--
 * @Description:处理下拉框带options的情况
 * @Version: 2.0
 * @Autor: kafei
 * @Date: 2021-11-29 14:14:16
 * @LastEditors: kafei
 * @LastEditTime: 2021-12-21 14:15:33
-->
<template>
  <el-select
    v-model="currentValue"
    v-bind="$attrs"
    style="width:100%"
    @change="changeFun"
    @remove-tag="removeTag"
    @clear="changeFun"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </el-select>
</template>

<script>
export default {
  name: 'ElSelectOptions',
  props: {
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    value: {
      type: [String, Number, Array],
      default: ''
    },
    config: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      currentValue: this.value
    }
  },
  watch: {
    value (value) {
      this.currentValue = value
    },
    options (nVal) {
      if (nVal.length === 1) {
        this.setFirstSelect(nVal)
      }
    }
  },
  created () {
    const { multiple } = this.$attrs
    console.log(this.value, 'this.valuethis.value')
    if (multiple && Array.isArray(this.value)) {
      this.currentValue = this.value.filter(v => Boolean(v.length > 0))
    }
    this.setFirstSelect(this.options)
  },
  methods: {
    setFirstSelect (data) {
      if (data.length === 1) {
        const target = data[0]
        if (target) {
          this.currentValue = target.value
          console.log(this.currentValue, 'this.currentValue')
          this.changeFun(this.currentValue)
        }
      }
    },
    removeTag (value) {
      console.log(value, 'valu2222e')
    },
    changeFun (value) {
      this.$emit('input', value)
      this.$emit('change', value)
    }
  }
}
</script>

<style>

</style>
